﻿@page "/ChartPieSeries"
<div class="demo-description">
    <h2><DemoNavLink Link="ChartPieSeries#Pie" />Pie Series</h2>
    <p>
        This demo illustrates how to use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartPieSeries-3">Pie</a> series within the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> component.
        You can use the Pie series to compare the percentage values of different point arguments in the same series and illustrate these values as pie slices.
    </p>
</div>
<DxChart Data="@SalesData"
         CssClass="mw-1100">
    <DxChartTitle Text="Total Sales" />
    <DxChartLegend VerticalAlignment="VerticalEdge.Bottom" Position="RelativePosition.Outside" />
    <DxChartPieSeries ValueField="@((SaleInfo i) => i.Amount)" ArgumentField="@(i => i.City)" AggregationMethod="Enumerable.Sum">
        <DxChartSeriesLabel Visible="true" />
    </DxChartPieSeries>
</DxChart>
<CodeSnippet_Charts_PieSeries />
<div class="demo-description">
    <h2><DemoNavLink Link="ChartPieSeries#Donut" />Donut Series</h2>
    <p>
        This demo illustrates how to use <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartDonutSeries-3">Donut</a> series within the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> component.
        The Donut series displays data as a Pie series (see above) with a hole in the center.
    </p>
</div>
<DxChart Data="@SalesData"
         CssClass="mw-1100">
    <DxChartTitle Text="Total Sales" />
    <DxChartLegend AllowToggleSeries="true" VerticalAlignment="VerticalEdge.Bottom" Position="RelativePosition.Outside" />
    <DxChartDonutSeries ValueField="@((SaleInfo i) => i.Amount)" ArgumentField="@(i => i.City)" AggregationMethod="Enumerable.Sum">
        <DxChartSeriesLabel Visible="true" />
    </DxChartDonutSeries>
</DxChart>
<CodeSnippet_Charts_DonutSeries />
@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }
    IEnumerable<SaleInfo> SalesData;

    protected override async Task OnInitializedAsync()
    {
        SalesData = (await Sales.GetSalesAsync()).Where(x => x.Country == "United States");
    }
}
